import { getCssVariableValue } from '@/utils/utils';

// 表头
export const tableColumns = [
  { code: 'point', name: '时点', width: 80, align: 'center' },
  {
    code: 'overloaded',
    name: '是否越限',
    width: 80,
    align: 'center',
    render: (text) => (text === '-' ? '否' : '是'),
  },
  { code: 'congestionPrice', name: '阻塞价格 (元/MWh)', width: 100, align: 'center' },
  { code: 'powerFlow', name: '潮流(MW)', width: 100, align: 'center' },
];

export const tableColumnsHlj = [
  { code: 'updateTime', name: '日期', width: 80, align: 'center' },
  {
    code: 'crossSectionName',
    name: '断面名称',
    width: 100,
    align: 'center',
  },
  {
    code: 'timeType',
    name: '数据类型',
    width: 100,
    align: 'center',
    render: (text) => (text === 'dayahead' ? '日前' : '实时'),
  },
  {
    code: 'positiveLimit',
    name: '正向限额',
    width: 100,
    align: 'center',
    render: (text) => (_.isNil(text) ? '-' : text),
  },
  {
    code: 'reverseLimit',
    name: '反向限额',
    width: 100,
    align: 'center',
    render: (text) => (_.isNil(text) ? '-' : text),
  },
  {
    code: 'beyondSatatus',
    name: '是否越限',
    width: 100,
    align: 'center',
  },
  {
    code: 'positiveBeyondLimitNumber',
    name: '正向越限时间段数',
    width: 100,
    align: 'center',
    render: (text) => (_.isNil(text) ? '-' : text),
  },
  {
    code: 'reverseBeyondLimitNumber',
    name: '反向越限时间段数',
    width: 100,
    align: 'center',
    render: (text) => (_.isNil(text) ? '-' : text),
  },
];

// 图表
const getChartOption = (values) => ({
  grid: { top: 24, left: 48, bottom: 75, right: 48 },
  series: [
    {
      type: 'line',
      name: '阻塞价格',
      color: '#5E92F6',
      data: values.congestionPrice,
    },
    {
      type: 'line',
      name: '潮流',
      color: '#67DCAB',
      data: values.powerFlow,
      props: { yAxisIndex: 1 },
    },
    {
      type: 'line',
      name: '越限',
      color: '#FD4F43',
      data: values.overloaded,
      props: {
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 6,
        yAxisIndex: 1,
        itemStyle: {
          borderWidth: 6,
          borderColor: 'rgba(253, 79, 67, 0.5)',
          color: '#FD4F43',
        },
      },
    },
  ],
  tooltip: {},
  legend: {
    textStyle: {
      color: getCssVariableValue('--chart-legend-color'),
    },
  },
  xAxis: [
    {
      type: 'category',
      data: values.datetime,
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisTick: {
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '元/MWh',
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      splitLine: {
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
    {
      type: 'value',
      name: 'MW',
      axisLabel: {
        color: getCssVariableValue('--chart-font-color'),
      },
      axisTick: {
        lineStyle: {
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      splitLine: {
        lineStyle: {
          color: getCssVariableValue('--chart-y-line'),
        },
      },
    },
  ],
  dataZoomInside: true,
});

// 表数据与图配置
export const fmtDataSource = (d) => {
  // 数据处理
  let tableData = [];
  let valueMap = {
    datetime: [],
    congestionPrice: [],
    powerFlow: [],
    overloaded: [],
  };
  d.map((x, xI) => {
    const k = x.lineType || xI;
    const dateMap = x.pointData || {};
    valueMap[k] = [];
    Object.keys(dateMap).map((date, dateI) => {
      const timeMap = dateMap[date] || {};
      if (!tableData[dateI]) {
        tableData[dateI] = {
          id: date,
          groupTitle: date.replace(/[-]/g, ''),
          children: [],
        };
      }
      Object.keys(timeMap).map((time, timeI) => {
        const value = timeMap[time];
        if (!tableData[dateI].children[timeI]) {
          const datetime = `${date} ${time}`.replace(/[-|:]/g, '');
          valueMap.datetime.push(datetime); // YYYYMMDD HHmm
          tableData[dateI].children[timeI] = {
            id: datetime,
            point: time.replace(':', ''),
          };
        }
        valueMap[k].push(value);
        tableData[dateI].children[timeI][k] = value;
      });
    });
  });
  const chartOption = getChartOption(valueMap);
  return {
    tableData,
    chartOption,
  };
};

export const fmtHljDataSource = (d, params) => {
  // 数据处理
  const chartOption = {
    grid: { top: 24, left: 48, bottom: 75, right: 48 },
    series: [
      {
        type: 'line',
        name: '实时',
        color: '#5E92F6',
        data: d.actualValues,
      },
      {
        type: 'line',
        name: '日前',
        color: '#67DCAB',
        data: d.aheadValues,
      },
    ],
    tooltip: {},
    legend: {
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
      },
    },
    xAxis: [
      {
        type: 'category',
        data: d.xAxis,
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name:
          params?.limitIndex === 'positiveLimit' || params?.limitIndex === 'reverseLimit'
            ? 'MW'
            : '个',
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
        axisTick: {
          lineStyle: {
            color: getCssVariableValue('--chart-x-line'),
          },
        },
        splitLine: {
          lineStyle: {
            color: getCssVariableValue('--chart-y-line'),
          },
        },
      },
    ],
    dataZoomInside: true,
  };
  return {
    tableData: d.blockMonitorTable,
    chartOption,
  };
};
